<template>
	<view class="body">
		<view class="head">
			<view class="firstmessage">
				<u-search placeholder="日照香炉生紫烟" v-model="keyword" class="searchk"
				actionText="搜索"
				></u-search>
			</view>
		</view>
		<view class="center" v-for="(item,index) in list">
			
			<view class="commodity">
				<view class="user">
					<view class="userava"  @click="gomct(item)">
						<image :src="item.srcs" class="useravaimg"></image>
					</view>
					<view class="username">
						<view class="putontime">
							<text id="uploadtime">{{item.name}}</text>
							<!--判断是否为本人id，删除-->
							<text id="del" @click="del(item.productId)" v-if="item.openId===openId">delete</text>
						</view>
						<view class="putontime">
							<text id="uploadtime">{{item.uptime}}</text>
							<text id="onlinetime">{{item.ontime}}</text>
						</view>
					</view>
				</view>
				
				<!-- <view class="commodityposter" @click="gocom"> -->
					<image :src="item.imgProduct" class="commodityposter" mode="aspectFill"  @click="gocom(item)" ></image>
				<!-- </view> -->
				<view class="commodityintro">
					<view class="freepost">
						<image src="/static/包邮.png" class="freepostimg"></image>
					</view>
					<view class="comtitle" v-if="item.content!=null">
						{{item.content}}
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
					
				],
				pageNum:1,
				pageSize:10000,
				srcs:null,
				openId:'',
			};

		},
		mounted(){
			this.get();
		},
		methods:{
			get(){
				var that = this;
				uni.getStorage({
					key:"user",
					success:(res) =>{
						that.openId = res.data.openId;
						console.log("openId"+that.openId);
					}
				})
				this.$axios(
				{
					method:'POST',
					url:`/article/getArticleList/${that.pageNum}`,
					params:{
						pageNum:that.pageNum,
						pageSize:that.pageSize
					}
					
				}).then(
					res =>{
						that.list.splice(0);
						const moment = require('moment');
						for(var i=0; i<res.data.length;i++){
							var item={};
							item.productId=res.data[i].article.id;
							item.openId=res.data[i].user.openId;
							item.name=res.data[i].user.userName;
							item.uptime=moment(res.data[i].article.updateTime).utc().format('YYYY-MM-DD HH:mm:ss');
							//转为北京时间
							item.email=res.data[i].user.email;
							item.userIntroduce=res.data[i].user.userIntroduce;
							item.ontime= parseInt((Date.now()-Date.parse(item.uptime))/(60*60*1000))+'h前';
							if(item.ontime=='0h前'){
								item.ontime='刚刚'
							}
							item.srcs=res.data[i].user.headImg;
							item.content=res.data[i].article.content;
							item.imgProduct=res.data[i].article.img;
							that.list.push(item);
						}
						console.log(res.data);
					}
				).catch(
					err =>{
						console.log(err);
					}
				)
			},
			del(id){
				console.log(id);
				var that=this;
				
				this.$axios(
				{
					method:'POST',
					url:'/article/deleteArticle',
					params:{
						id:id,
					}
					
				}).then(
					res =>{
						console.log("删了吗？"+res.data);
						that.get();
					}
				).catch(
					err =>{
						console.log("删了吗？"+err);
					}
				)
			},
			gocom(item){
				uni.navigateTo({
					url:'../commodity/commodity?marketitem='+encodeURIComponent(JSON.stringify(item))
				})
			},
			gomct(item){
				uni.navigateTo({
					url:'../merchant/merchant?item='+encodeURIComponent(JSON.stringify(item))
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	#del{
		color:#708090;
	}
	.user{
		display: flex;
		flex-direction: row;
		justify-content:flex-start;
		width: 100%;
		background-color: #eeeeef;
		margin-top: 2%;
		
		.userava{
			width: 100upx;
			height: 100upx;
			margin-left: 3%;
			border-radius: 50%;
			border: 1upx solid #b1b1b1;
		}
		.useravaimg{
			width: 100upx;
			height: 100upx;
			border-radius: 50%;
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		}
		.username{
			// background-color: #000000;
			
			margin-top: 2%;
			height: 100%;
			width: 70%;
			margin-left: 2%;
			
			justify-content: space-between;
			// background-color: #909193;
			margin-right: -10%;
		}
		.putontime{
			display: flex;
			justify-content: space-between;
			// background-color: #909193;
			margin-right: -10%;
		}
	}
	.body{
		display: flex;
		flex-direction: column;
		font-family:"Hiragino Sans GB","PingFang SC";
		
	}
	.head{
		background-color: #eeeeeF;
		width: 100%;
		height: 100upx;
		border:1upx solid lightgray;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		.firstmessage{
			margin-top: 20upx;
			width: 80%;
			margin-left: 10%;
			.searchk{
				
			}
		}
	}
	
	.center{
		
		margin-top: 2%;
		background-color: #eeeeef;
		width: 98%;
		margin-left: 1%;
		height: 600upx;
		position: relative;
		border-radius: 2%;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		border: 1upx solid lightgray;
		
		.commodity{
			width: 100%;
			height: 400upx;
			// background-color: #6c82ac;
			.commodityposter{
				margin-left: 5%;
				width: 90%;
				height: 90%;
				background-color: #2979FF;
				border-radius: 15upx;
				margin-top: 10upx;
				border: 1upx solid #ffffff;
				border:1upx solid lightgray;
				box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
			}
			.commodityintro{
				margin-top: 2%;
				display: flex;
				width: 90%;
				// background-color: #000000;
				// flex-direction: row;
				justify-content: space-between;
				margin-left: 5%;
				.freepost{
					width: 50upx;
					height: 50upx;
					// background-color: #000000;
					.freepostimg{
						width: 50upx;
						height: 50upx;
					}
					.comtitle{
						
					}
				}
			}
			
		}
		// .commodity{
		// 	width: 100%;
		// 	height: 500upx;
		// 	background-color: #ffffff;
		// 	display: flex;
		// 	.commodityintro{
				
		// 		// background-color: #000000;
		// 		width: 85%;
		// 		height: 80upx;
		// 		margin-left: 8%;
		// 		margin-top: 420upx;
		// 		.freepost{
		// 			width: 65upx;
		// 			height: 50%;
		// 			background-color: #90cec4;
		// 		}
		// 		.comtitle{
		// 			// background-color: #000000;
		// 			height: 80upx;
		// 			width: 85%;
		// 			position: absolute;
		// 			margin-top: -45upx;
		// 			margin-left: 80upx;
		// 		}
		// 	}
		// 	.commodityposter{
		// 		width: 85%;
		// 		height: 300upx;
		// 		background-color: #398ADE;
		// 		margin-left: 8%;
		// 		margin-top: 120upx;
		// 		border-radius: 15upx;
		// 	}
			
		// }
		
	}
</style>
